<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 60px">
      <el-col :span="8">
        <el-card style="color: #409EFF">
          <div><i class="cl-icon-user-solid"></i>用户总数</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold">
            {{ totalUsers }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="color: #f56c6c">
          <div><i class="el-icon-money"></i>语音总量</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold">
            {{ totalVoices }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="color: #67c23a;">
          <div><i class="cl-icon-bank-card"></i>当天新增语音数</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold">
            {{ todayVoices }}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div id="main" style="width: 1200px;height: 500px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'
import {getStatistics} from '@/api/home'; 

// 响应式数据
const totalUsers = ref(0)
const totalVoices = ref(0)
const todayVoices = ref(0)
const chartData = ref(null)
let myChart = null

// 获取统计数据
const fetchStatistics = async () => {
  try {
    const response = await getStatistics();
    const data = response.data.data
    console.log(data)
    
    // 更新基础统计数据
    totalUsers.value = data.totalUsers
    totalVoices.value = data.totalVoices
    todayVoices.value = data.todayVoices
    
    // 处理图表数据
    chartData.value = {
      dates: data.chartData.map(item => item.date),
      userIndices: data.chartData.map(item => item.userIndex),
      voiceIndices: data.chartData.map(item => item.voiceIndex)
    }
    
    // 更新图表
    updateChart()
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

// 更新图表配置
const updateChart = () => {
  if (!chartData.value) return

  const option = {
    title: {
      text: '增长指数'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['用户指数', '语音指数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartData.value.dates
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '用户指数',
        type: 'line',
        data: chartData.value.userIndices
      },
      {
        name: '语音指数',
        type: 'line',
        data: chartData.value.voiceIndices
      }
    ]
  }

  if (myChart) {
    myChart.setOption(option)
  }
}

onMounted(() => {
  // 初始化图表
  const chartDom = document.getElementById('main')
  myChart = echarts.init(chartDom)
  
  // 获取数据
  fetchStatistics()
  
  // 窗口变化时自适应
  window.addEventListener('resize', () => myChart?.resize())
})

onUnmounted(() => {
  // 销毁图表实例
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
  window.removeEventListener('resize', () => myChart?.resize())
})
</script>

<style scoped>
/* 自定义样式 */
</style>